<!--
 * @Description: 选房间——公共
 * @Author: Lxc
 * @Date: 2021-07-14 14:35:35
 * @LastEditors: luojie
 * @LastEditTime: 2021-08-12 19:34:39
-->
<template>
  <view class="check-in-dialog">
    <!-- <view class="block">
      <label class="title">房间选择</label>
      <text class="text">以下房间均已完成消杀</text>
    </view> -->
    <view class="header">
      <view class="tool">
        <!-- <picker @change="bindPickerChange" :value="index" :range="array">
        <view class="uni-input">{{ array[index] }}</view>
      </picker> -->
      <picker
          @change="bindPickerChange"
          :value="index"
          :range="array"
          range-key="name"
          class="normal-control-con-picker"
        >
          <view class="picker-content">
            <view style="display: inline-block" class="uni-input">{{
              selectedFloor ? selectedFloor + "F" : "选择楼层"
            }}</view>
            <view class="img" style="display: inline-block; float: right">
              <image
                class="nav-list-item-arr-show"
                src="https://szgd-dev.tgovcloud.com/public/images/checkin/arrow-down.png"
                mode="widthFix"
              ></image>
            </view>
          </view>
        </picker>

        <view class="search-room-num">
          <image src="https://szgd-dev.tgovcloud.com/public/images/checkin/icon-search.png"></image>
          <input
            class="uni-input"
            style="padding-left: 64rpx"
            placeholder="可输入房间号搜索"
            v-model="searchValue"
            @blur="searchRoomNum"
          />
        </view>

      </view>

      <view class="tips-title" v-if="type == 'medicalObservation'">
        <!-- <view class="tips-item">
          <view class="tips-btn" @click="selectRoom()">十大症状</view>
          <view class="tips-btn" @click="selectRoom()">基础疾病</view>
          <view class="tips-btn" @click="selectRoom()">心理疾病</view>
        </view>
        <view class="tips-item">
          <view class="tips-btn" @click="selectRoom()">老人</view>
          <view class="tips-btn" @click="selectRoom()">儿童</view>
          <view class="tips-btn" @click="selectRoom()">孕妇</view>
        </view>
        <view class="tips-item">
          <view class="tips-btn" @click="selectRoom()">急症病史</view>
        </view> -->

        <view class="tips-item" v-for="(item,index) in labelList" :key="index">
          <view class="tips-btn" @click="selectRoom(it)" v-for="(it,idx) in item"  :key="idx" :class="{'checked': it.checked}">
            <image
              v-if="it.icon"
              class="tip-icon"
              :src="it.imageUrl"
              mode="aspectFit"
            ></image>
            {{it.text}}
          </view>
        </view>

        <view class="sample-color">
          <view class="color-item"><view class="icon-brown"></view>未观察</view>
          <view class="color-item"><view class="icon-orange"></view>一次观察</view>
          <view class="color-item"><view class="icon-green"></view>二次观察</view>
        </view>
      </view>
      
      <view class="tips">以下房间为已入住</view>
    </view>

    <scroll-view scroll-y="true" class="floor-content" @scroll='scorllView' :scroll-top='scrollViewTop'>
      <radio-group v-if="roomList.length" class="check-content">
        <ul>
          <li v-for="item in roomList" :key="item.roomFloor">
            <h2 class="liHeader" v-if="item.houseStaticalVoList.length">
              {{ item.name }}F
            </h2>
            <div class="liContentwraper">
              <template v-for="(list, key) in item.houseStaticalVoList">
                <div
                  :class="
                    roomCheck == list.roomNum
                      ? 'roomContainer roomContainerCheck'
                      : 'roomContainer'
                  "
                  :key="key"
                  @click="
                    () => {
                      radioChange(list);
                    }
                  "
                >
                  <div class="top">{{ list.roomNum }}房</div>

                  <label class="status-wrapper">
                    <p class="status-ruzhu green-status" 
                      :class="{
                        'brown-status':list.medicalObservationState===0 && type=='medicalObservation', 
                        'orange-status':list.medicalObservationState==1 && type=='medicalObservation', 
                        'green-status':list.medicalObservationState==2 && type=='medicalObservation'
                      }"
                    >
                      <!-- {{ type == "medicalObservation" ? list.roomPersonNum : list.rs }}人 -->
                      {{ list.roomPersonNum }}人
                    </p>
                  </label>
                </div>
              </template>
            </div>
          </li>
        </ul>
      </radio-group>
      <view v-else class="placeholder">暂无数据～</view>
    </scroll-view>
    <view>
      <uni-popup ref="popup" type="bottom" background-color="#fff">
        <view class="room-detail-content">
          <room-detail
            :type="type"
            :roomNum="roomNum"
            :personList="personList"
            :idList="idList"
            :searchValue="searchValue"
            :selectedFloor="selectedFloor"
            :checkedList="checkedList"
          ></room-detail>
        </view>
      </uni-popup>
    </view>
  </view>
</template>

<script>
import { getData, houseInfo, houseInfoDetail, getPersonReferral } from "@/api";
import RoomDetail from "./roomDetail.vue";
export default {
  props: ["value", "houseId"],
  data() {
    return {
      roomCheck: this.value,
      roomId: this.houseId,
      roomNum: [],
      searchValue: "",
      index: "0",
      roomList: [],
      array: ["楼层选择", "1楼", "2楼", "3楼", "4楼"],
      selectedFloor: "", // 选中的楼层
      personList: [], // 根据房间编码查询住房人员
      type: "", // 从什么类型的跳过来
      showPopup: false,
      idList:[],
      scrollViewTop:0, // 滚动条位置
      labelList:[
        [
          {
            label: "01",
            text:"十大症状",
            checked: false,
            imageUrl: "../../static/medicalObservation/icon-ten.png",
            icon: true,
          },
          {
            label: "02",
            text:"基础疾病",
            checked: false,
            imageUrl: "../../static/medicalObservation/icon-basic.png",
            icon: true,
          },
          {
            label: "03",
            text:"心理疾病",
            checked: false,
            imageUrl: "../../static/medicalObservation/icon-psychology.png",
            icon: true,
          },
        ],
        [
          {
            label: "07",
            text:"急症病史",
            checked: false,
            imageUrl: "../../static/medicalObservation/icon-emergency.png",
            icon: true,
          },
          {
            label: "04",
            text:"老人",
            checked: false,
            imageUrl: "../../static/medicalObservation/icon-old.png",
            icon: true,
          },
          {
            label: "05",
            text:"儿童",
            checked: false,
            imageUrl: "../../static/medicalObservation/icon-child.png",
            icon: true,
          },
        ],
        [
          {
            label: "06",
            text:"孕妇",
            checked: false,
            imageUrl: "../../static/medicalObservation/icon-gravida.png",
            icon: true,
          },
          {
            label: "00", 
            text:"关爱人群",
            checked: false,
            imageUrl: "",
            icon: false,
          },
          {
            label: "",  // 这是一个visibility:hidden隐藏的元素，布局用的
            text:"",
            checked: false,
            imageUrl: "",
            icon: false,
          },
        ],
      ],
      checkedList:[],
    };
  },
  computed: {
    // floorList() {
    //   this.roomList.forEach(t => {
    //     t.rooms = t.houseStaticalVoList.filter(t => t.rs > 0 || t.roomPersonNum >0);
    //   });
    //   let floors = this.roomList.filter(t => t.rooms.length);
    //   return floors;
    // }
  },
  methods: {
    onDialogClose() {
      this.$emit("onClose");
    },
    radioChange(item) {
      uni.setStorageSync('thisRoomNum', item.roomNum);
      this.roomCheck = item.roomNum;
      this.roomId = item.houseId;
      this.roomNum = item.roomNum;
      let that = this;
      // 根据房间编码查询住房人员
      // houseInfo(this.roomId).then((rs) => {
      that.personList = []; //先置空
      houseInfoDetail({houseId: this.roomId, humanState: that.checkedList}).then((rs) => {
        that.personList = rs;
        if(that.type == 'referral'){
          let personIds = [];
          that.personList.forEach(item=>{
            personIds.push(item.personId);
          })
          getPersonReferral(personIds).then((res)=>{
            that.idList = res;
            that.personList.forEach(item=>{
              that.idList.forEach(it=>{
                if (item.personId == it.personId) {
                  item.seeDoctor = it.seeDoctor;
                }
              })
            })
          })
        }
      });
      // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
      this.$refs.popup.open("bottom");
    },
    searchRoomNum() {
      // 搜索时清除楼层选择
      this.selectedFloor = "";
      let hotelId = uni.getStorageSync("hotelId")

      let params = {
        hotelId: hotelId, 
        roomNum: this.searchValue,
      }

      if (this.type == "medicalObservation") {
        params.medicalObservationStatistic = true;
        params.humanState = this.checkedList;
      }
      // else{
      //   getData("publicRoomList", "get", { hotelId: hotelId, roomNum: this.searchValue }).then((res) => {
      //     let roomList = res || [];
      //     this.roomList = roomList;
      //   });
      // }

      getData("medicalObservationRoom", "POST", params).then((res) => {
        let roomList = res || [];
        this.roomList = this.arrySort(roomList);
      });
      
    },
    bindPickerChange(e) {
      // 选择楼层清除搜索关键词
      this.searchValue = "";

      // console.log("picker发送选择改变，携带值为", e.target.value);
      let target = e.target.value ? this.array[e.target.value] : "";

      let { name } = target;
      this.selectedFloor = name;
      let hotelId = uni.getStorageSync("hotelId")

      let params = {
        hotelId: hotelId, 
        roomFloor: name == "全部" ? '' : name,
      }

      if (this.type == "medicalObservation") {
        params.medicalObservationStatistic = true;
        params.humanState = this.checkedList;
      }

      getData("medicalObservationRoom", "POST", params).then((res) => {
        let roomList = res || [];
        this.roomList = this.arrySort(roomList);
      });
    },

    removeSoStorage(){
      this.$store.commit('REMOVE_DATA_IGP')
    },
    // 回显筛选数据
    saveData(hotelId){
      let curSelectedFloor = uni.getStorageSync("curSelectedFloor");
      let curSearchValue = uni.getStorageSync("curSearchValue");
      this.checkedList = uni.getStorageSync("checkedList") ? uni.getStorageSync("checkedList") : [];
      
      if (curSelectedFloor || curSearchValue || this.checkedList.length) {
        this.searchValue = curSearchValue;
        this.selectedFloor = curSelectedFloor;
        let params = {
          hotelId: hotelId, 
          // name: curSelectedFloor,
          roomFloor: curSelectedFloor == "全部" ? '' : curSelectedFloor,
          roomNum: curSearchValue,
        }
        if (this.type == "medicalObservation") {
          // 医学观察回显
          params.medicalObservationStatistic = true;
          params.humanState = this.checkedList;
        }

        getData("medicalObservationRoom", "POST", params).then((res) => {
          let roomList = res || [];
          this.roomList = this.arrySort(roomList);
          // 设置距离顶部位置
          this.$nextTick(()=>{
            this.scrollViewTop = uni.getStorageSync('scrollViewTop') || 0;
          })
        });
        
        // getData("publicRoomList", "get", params).then((res) => {
        //   let roomList = res || [];
        //   this.roomList = roomList;
        // });

        this.labelList.forEach(item =>{
          item.forEach(it=>{
            if (this.checkedList.indexOf(it.label)!=-1 ) {
              it.checked = true;
            }
          })
        })
      }
    },
    scorllView(e){
      uni.setStorageSync('scrollViewTop', e.detail.scrollTop)
    },
    selectRoom(it){
      it.checked = !it.checked;
      if (it.label == '00') {
        if ( it.checked == true) {
          this.checkedList = ["02", "03", "04", "05", "06", "07"];
          this.labelList.forEach(item=>{
            item.forEach(t=>{
              if (this.checkedList.indexOf(t.label) != -1 ) {
                t.checked = true;
              }
            })
          })
        }else{
          this.checkedList = [];
          this.labelList.forEach(item=>{
            item.forEach(t=>{
              t.checked = false;
            })
          })
        }
      }else{
        let idx = this.checkedList.indexOf(it.label);
        idx == -1 ? this.checkedList.push(it.label) : this.checkedList.splice(idx, 1);
      }
      
      let params = {
        hotelId: this.hotelId, 
        // name: this.selectedFloor == "全部" ? '' : this.selectedFloor,
        roomFloor: this.selectedFloor == "全部" ? '' : this.selectedFloor,
        roomNum: this.searchValue,
        medicalObservationStatistic: true,
        humanState: this.checkedList,
      }
      getData("medicalObservationRoom", "POST", params).then((res) => {
        let roomList = res || [];
        this.roomList = this.arrySort(roomList);
      });
    },
    arrySort(arr){
      arr.forEach(item=>{
        if (item&&item.houseStaticalVoList) {
          item.houseStaticalVoList.sort((a,b)=>{
            return a.roomNum -b.roomNum
          })
        }
      })
      return arr;
    },
  },
  onLoad(options) {
    // 从什么类型的跳过来
    this.type = options.type;
  },
  onReady() {
    uni.showLoading();
    let hotelId = uni.getStorageSync("hotelId");
    this.hotelId = hotelId;
    // let fn="publicRoomList", methods="get";
    let params={ hotelId: hotelId };
    if (this.type == "medicalObservation") {
      params.medicalObservationStatistic = true;
    }
    getData("medicalObservationRoom", "POST", params).then((res) => {
      let roomList = res || [];
      // roomList.sort((a, b) => {
      //   return a.name - b.name;
      // });
     
      this.roomList = this.arrySort(roomList);  //房间号排序
      // this.array = this.floorList.map(t => ({ name: t.name }));
      
      this.array = res.sort((a,b)=>{
                  return a.roomFloor-b.roomFloor;
                });
      this.array.unshift({ name: '全部' });

      this.saveData(hotelId);

      uni.hideLoading();
      
      // 设置距离顶部位置
      this.$nextTick(()=>{
        this.scrollViewTop = uni.getStorageSync('scrollViewTop') || 0;
      })
    });
  },
  onShow() {
    // 用于解决重成功页面返回当前页面房间状态未更新问题
    // console.log("reload");
    // uni.$on("reload", (res) => {
    //   if (res.data.name == "reload") {
    //     let hotelId = uni.getStorageSync("hotelId");
    //     getData("publicRoomList", "get", { hotelId: hotelId, roomNum: this.searchValue }).then(
    //       (res) => {
    //         let roomList = res || [];
    //         roomList.sort((a, b) => {
    //           return a.name - b.name;
    //         });
    //         this.roomList = roomList
    //         this.array = this.floorList.map(t => ({ name: t.name }));

    //         this.saveData(hotelId);
    //       }
    //     );
    //   }
    //   // 清除监听
    //   uni.$off("reload");
    // });
    this.removeSoStorage();
  },
  components: {
    RoomDetail,
  },
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.placeholder {
  padding-top: 50rpx;
  text-align: center;
  color: #ccc;
}
.check-in-dialog {
  // height: 1000rpx;
  overflow: auto;
  position: relative;
  padding-top: 30rpx;
  display: flex;
  flex-direction: column;
  height: 100vh;
  box-sizing: border-box;
}
.floor-content {
  flex: 1;
  overflow-y: auto;
}
.check-content {
  margin-bottom: 192rpx; //取消/确定按钮
}
.block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 97rpx;
  margin: 0 32rpx;
  .title {
    font-size: 40rpx;
    color: #000000;
    font-weight: bold;
    // padding: 20rpx 32rpx 20rpx;
  }
  .text {
    color: #d93f06;
    font-size: 24rpx;
    text-align: right;
    // padding: 20rpx 32rpx 20rpx;
  }
}

// .uni-searchbar {
//   padding: 32rpx 16rpx !important;
// }
.uni-searchbar__box {
  border-radius: 60rpx !important;
  background-color: #fff !important;
}

// .popup-content {
//   width: 750rpx;
//   height: 100%;
// }
.header {
  padding-bottom: 20rpx;
  background: #ffffff;
  .tips {
    color: #d93f06;
    font-size: 24rpx;
    margin-left: 66rpx;
    margin-top: 24rpx;
    &:before {
      content: "";
      position: absolute;
      left: 25rpx;
      width: 34rpx;
      height: 34rpx;
      background: url("https://szgd-dev.tgovcloud.com/public/images/tips-icon.png") no-repeat;
      background-size: contain;
    }
  }
}
.tool {
  // height: 96rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  .picker-content {
    display: flex;
    align-items: center;
    margin-right: 10rpx;
    width: 240rpx;
    height: 56rpx;
    border: 1rpx solid #999999;
    opacity: 1;
    border-radius: 60rpx;
    position: relative;
    color: #999999;
  }
  .normal-control-con-picker {
    // text-align: center;

    .uni-input {
      text-align: left;
      padding-left: 30rpx;
      font-size: 26rpx;
      font-weight: 500;
      color: #000000;
    }
    // .uni-input::placeholder{
    //   color: #CCCCCC;
    // }
    .img {
      width: 44rpx;
      height: 44rpx;
      position: absolute;
      right: 20rpx;
      top: 50%;
      transform: translateY(-50%);
      .nav-list-item-arr-show {
        display: inline-block;
        width: 44rpx;
        height: 44rpx;
      }
    }
  }
  .search-room-num {
    display: flex;
    align-items: center;
    width: 436rpx;
    height: 56rpx;
    background: #ffffff;
    border: 1rpx solid #999999;
    opacity: 1;
    border-radius: 60rpx;
    position: relative;
    image {
      display: inline-block;
      width: 44rpx;
      height: 44rpx;
      position: absolute;
      left: 10rpx;
      top: 50%;
      transform: translateY(-50%);
    }
    // ::-webkit-input-placeholder {
    //   /* WebKit browsers */
    //   color: #cccccc;
    //   font-size: 26rpx;
    //   // font-weight: 500;
    // }
    // input::placeholder {
    //   color: #cccccc;
    //   font-size: 26rpx;
    // }
    ::-webkit-input-placeholder {
      color: #cccccc;
      font-size: 26rpx;
      font-weight: 500;
    }

    /* Firefox 4-18 */
    :-moz-placeholder {
      color: #cccccc;
      font-size: 26rpx;
      font-weight: 500;
    }

    /* Firefox 19-50 */
    ::-moz-placeholder {
      color: #cccccc;
      font-size: 26rpx;
      font-weight: 500;
    }

    /* - Internet Explorer 10–11
   - Internet Explorer Mobile 10-11 */
    :-ms-input-placeholder {
      color: #cccccc;
      font-size: 26rpx;
      font-weight: 500;
    }

    /* Edge (also supports ::-webkit-input-placeholder) */
    ::-ms-input-placeholder {
      color: #cccccc;
      font-size: 26rpx;
      font-weight: 500;
    }

    /* CSS Working Draft */
    ::placeholder {
      color: #cccccc;
      font-size: 26rpx;
      font-weight: 500;
    }
  }
  // .search {
  //   background: #fff;
  //   border: 1rpx solid #999999;
  //   // border-radius: 50%;
  //   width: 436rpx;
  //   height: 56rpx;
  //   background: #ffffff;
  //   border: 1rpx solid #999999;
  //   opacity: 1;
  //   border-radius: 60rpx;
  //   /deep/ .uni_searchbar__box {
  //     background: #fff;
  //     border: 1rpx solid #999999;
  //     // border-radius: 50%;
  //     width: 436rpx;
  //     height: 56rpx;
  //     background: #ffffff;
  //     border: 1rpx solid #999999;
  //     opacity: 1;
  //     border-radius: 60rpx;
  //   }
  // }
}
.tips-title{
  padding: 0 32rpx;
  margin: 30rpx 0;
  .tips-item{
    display: flex;
    justify-content:space-between;
    box-sizing: border-box;
    // margin-bottom: 15rpx;
    margin-bottom: 10rpx;
    text-align: center;
    .tips-btn{
      // height: 56rpx;
      // line-height: 54rpx;
      height: 86rpx;
      line-height: 86rpx;
      // min-width: 164rpx;
      min-width: 218rpx;
      border: 1rpx solid #2C9AF1;
      // font-size: 26rpx;
      font-size: 32rpx;
      border-radius: 10rpx;
      color: #2C9AF1;
      box-sizing: border-box;
      position: relative;
      font-weight: 600;
    }
    .checked{
      background: rgba(44, 154, 241, 0.3);
      // background: rgba(44, 154, 241, 0.1);
    }
  }
  .tips-item:nth-child(3){
    .tips-btn:nth-child(2){
      // visibility: hidden;
    }
    .tips-btn:nth-child(3){
      visibility: hidden;
    }
  }
  .tip-icon{
    // width: 30rpx;
    // height: 30rpx;
    width: 34rpx;
    height: 34rpx;
    margin-bottom: -5rpx;
    margin-right: 10rpx;
  }

  .sample-color{
    display: flex;
    font-size: 26rpx;
    margin-top: 20rpx;
    .color-item{
      display: flex;
      padding-right: 30rpx;
      line-height: 32rpx;
      view{
        width: 60rpx;
        height: 24rpx;
        border-radius: 4rpx;
        margin-right: 10rpx;
      }
      .icon-brown{
        background: rgba(241, 91, 83, 0.1);
        border: 2rpx solid rgba(241, 91, 83, 0.5);
      }
      .icon-orange{
        background: rgba(255, 172, 30, 0.1);;
        border: 2rpx solid rgba(255, 172, 30, 0.5);
      }
      .icon-green{
        background: rgba(19, 197, 99, 0.1);
        border: 2rpx solid rgba(19, 197, 99, 0.5);
      }
    }
    
  }
  
}
.liHeader {
  background: #f7f7f7;
  // padding: 20rpx 32rpx;
  height: 48rpx;
  line-height: 48rpx;
  margin-bottom: 22rpx;
  padding-left: 32rpx;
  font-size: 34rpx;
}
.liContentwraper {
  display: flex;
  padding: 0 32rpx;
  justify-content: space-between;
  flex-wrap: wrap;
}
.roomContainer {
  width: 328rpx;
  height: 160rpx;
  border: 2rpx solid #e5e5e5;
  // background: #f2f2f2;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  .top {
    display: flex;
    align-items: center;
    justify-content: center;
    // justify-content: space-between;
    height: 68rpx;
    font-size: 30rpx;
    // .roomNum {
    //   width: 60%;
    //   background: #fff;
    //   text-align: center;
    //   line-height: 64rpx;
    //   border-top-left-radius: 16rpx;
    // }
    .status {
      // width: 40%;

      background-color: #daffd5;
      text-align: center;
      // line-height: 64rpx;
      color: #66dd55;
      // border-top-right-radius: 16rpx;
      // border-radius: 0rpx 16rpx 0rpx 16rpx;
    }
    .status-ruzhu {
      // width: 40%;
      background-color: #fbebe5;
      text-align: center;
      line-height: 64rpx;
      color: #d93f06;
      // border-top-right-radius: 16rpx;
      border-radius: 0rpx 16rpx 0rpx 16rpx;
    }
  }
  .status-wrapper {
    position: relative;

    font-size: 30rpx;
    font-weight: 500;
    background: #f2f2f2;
    p {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 92rpx;
      border-radius: 0rpx 0rpx 16rpx 16rpx;
    }
    .green-status {
      color: #66dd55;
      background-color: #daffd5;
    }
    .brown-status {
      color: rgba(102, 102, 102, 1);
      background-color: rgba(241, 91, 83, 0.1);
    }
    .orange-status {
      color: rgba(102, 102, 102, 1);
      background-color: rgba(255, 172, 30, 0.1);
    }
    .red-status {
      color: #f15b53;
      background-color: #fcdedc;
    }
  }
  // .radio {
  //   position: absolute;
  //   right: 0;
  //   top: 20rpx;
  // }
}
.roomContainerCheck {
  border: 2rpx solid #2c9af1;
  .roomNum {
    color: #2c9af1;
  }
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  border: 1px solid #efefef;
  // padding: 58rpx 32rpx;
  // border: 1rpx solid #cccccc;
  background: #fff;
  button {
    margin: 30rpx 32rpx;
    // width: 100%;
  }
  .cancle {
    width: 328rpx;
    color: #000000;
    font-size: 34rpx;
    background: #fff;
    border: 1rpx solid #cccccc;
    border-radius: 16rpx;
    margin-right: 30rpx;
  }
  .dialogOk {
    // width: 328rpx;
    color: #fff;
    font-size: 34rpx;
    background: #2c9af1;
    border-radius: 16rpx;
  }
}
</style>
